<template>
    <view class="main">
        <view class="uni-textarea">
            <textarea maxlength=-1 placeholder-style="color:gray;font-size:24rpx;" style="width: 98%;"
                :placeholder="placeholder" v-model="keyword" />
        </view>
        <button type="primary" class="btn" @click="setLink()">点击查询商品</button>
        <button type="warn" class="btn" @click="clearLink()">清空</button>
        <goods :list="goodsList"></goods>
        <view>
            <!-- 普通弹窗 -->
            <uni-popup ref="popup" background-color="#fff">
                <view class="popup-content">
                    <text class="title">检测到商品</text>
                    <image class="productImg" :src="popupInfo.image"></image>
                    <view class="productTitle">
                        {{popupInfo.title}}
                    </view>
                    <text class="channel">{{popupInfo.channel}}</text>
                    <view class="clear"></view>
                    <view class="showProductBtn" @click.stop="goDetail()">
                        查看商品
                    </view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
    import goods from '@/components/goods/goods'
    import {
        SetLink,
        GetProductList
    } from "@/services/ProductService"
    import {
        checkLogin,
        getTime
    } from "@/utils/utils"
    export default {
        components: {
            goods
        },
        data() {
            return {
                keyword: "",
                popupInfo: {
                    title: "2023爆款古拉达偏光太阳镜防紫外线女士正品墨镜男开车钓鱼专用潮",
                    image: "https://img.pddpic.com/mms-material-img/2023-04-10/2d067344-760b-46a3-ac76-e8a78563e387.png",
                    channel: "拼多多商品",
                    goods_sign: ""
                },
                placeholder: "粘贴商品链接查询返利,如：https://item.jd.com/123456789.html",
                goodsList: [],
                page: 1,
                pageSize: 10
            }
        },
        methods: {
            setLink() {
                // 弹窗打开，需要在OnLoad方法中调用一次
                if (!this.keyword) {
                    this.tostMsg('商品链接不能为空', 'error')
                    return false;
                }
                this.asyncSetLink()
            },
            clearLink() {
                this.keyword = "";
            },
            async asyncSetLink() {
                this.showLoading()
                let setRes = await SetLink({
                    keyword: this.keyword,
                    timestamp: getTime()
                })
                if (setRes.code == 0) {
                    this.hideLoading()
                    this.popupInfo = setRes.datas.product_info
                    this.$refs.popup.open('center')
                } else {
                    this.hideLoading()
                    this.tostMsg('该商品没有找到返利信息', 'error')
                }
            },
            goDetail: function() {
                uni.navigateTo({
                    url: `/pages/product/info?goods_sign=${this.popupInfo.goods_sign}`
                })
                this.keyword = "";
                this.$refs.popup.close();
            },
            async asyncGetProductList(currentPage) {
                this.showLoading()
                let getProductListRes = await GetProductList({
                    timestamp: getTime(),
                    page: currentPage,
                    page_size: this.pageSize
                });
                if (getProductListRes.code == 0) {
                    this.hideLoading()
                    let dateLength = getProductListRes.datas.product_list.length;
                    if (dateLength) {
                        for (var i = 0; i < dateLength; i++) {
                            this.goodsList.push(getProductListRes.datas.product_list[i]);
                        }
                        this.page = currentPage + 1;
                    } else {
                        this.tostMsg('没有更多数据了')
                    }
                } else {
                    this.hideLoading()
                    this.tostMsg('网络太慢，请求不到')
                    return false;
                }
                this.hideLoading()
            }
        },
        onReachBottom() {
            if (this.page != 1) {
                this.asyncGetProductList(this.page)
            }
        },
        onLoad() {
            this.asyncGetProductList(1)
        }
    }
</script>

<style lang="scss" scoped>
    .main {
        margin-bottom: 20rpx;
        background-color: #ededed;
    }

    .uni-textarea {
        width: 90%;
        border-radius: 20rpx;
        background-color: lightgray;
        font-size: 24rpx;
        color: black;

        padding: {
            left: 20rpx;
            top: 20rpx;
        }

        ;
        margin: 0 auto;

        margin: {
            top: 20rpx;
            bottom: 40rpx;
        }

        ;
    }

    .btn {
        width: 40%;
        display: inline-block;

        margin: {
            bottom: 30rpx;
            left: 6%;
        }

        ;
    }

    .popup-content {
        height: 500rpx;
        width: 600rpx;
        background-color: #fff;
        border-radius: 20rpx;
    }

    .title {
        display: block;
        text-align: center;
        font-size: 24px;

        margin: {
            top: 20rpx;
            bottom: 20rpx;
        }

        ;
        // color: #333;
    }

    .productImg {
        height: 200rpx;
        width: 200rpx;
        float: left;
        margin-left: 20rpx;
    }

    .productTitle {
        max-height: 160rpx;
        overflow: hidden;
        width: 330rpx;
        border: 0rpx solid red;
        float: left;
        margin-left: 20rpx;
        line-height: 34rpx;
    }

    .channel {
        display: block;
        border: 0rpx solid red;
        float: left;

        margin: {
            top: 10rpx;
            left: 20rpx;
        }

        ;
        color: #ab4146;
        font-size: 20rpx;
        padding: 8rpx;
        border-radius: 20rpx;
        background-color: #f2dcd9;
    }

    .showProductBtn {
        border: 1rpx solid red;
        text-align: center;
        width: 200rpx;
        margin: 0 auto;
        margin-top: 50rpx;
        padding: 10rpx;
        border-radius: 10rpx;
        background-color: #da3232;
        color: #fff;
    }
</style>